.t-1 {
    .transform(translateX(10px));
}

.t-2 {
    .transform(translateX(10px) rotate(10deg));
}

.t-3 {
    .transform(translateX(10px), rotate(10deg));
}

.ts {
    .transform-style(flat);
}

.to {
    .transform-origin(50% 50% 0);
}

.bv {
    .backface-visibility(visible);
}

.p {
    .perspective(10px);
}

.ts {
    .transform-single(translateX, 10px);
}

.m {
    .matrix(1, 2, 3, 4, 5, 6);
}

.tr-1 {
    .translate(10px)
}

.tr-2 {
    .translate(10px, 5em);
}

.tr-x {
    .translateX(10px);
}

.tr-y {
    .translateY(5em);
}

.s-1 {
    .scale(2);
}

.s-2 {
    .scale(2, 0.5);
}

.s-x {
    .scaleX(2);
}

.s-y {
    .scaleX(0.5);
}

.r {
    .rotate(90deg);
}

.sk-1 {
    .skew(30deg);
}

.sk-2 {
    .skew(30deg, -90deg);
}

.sk-x {
    .skewX(30deg);
}

.sk-y {
    .skewY(-90deg);
}

.m3d {
    .matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
}

.tr3d {
    .translate3d(10px, 5em, 10%);
}

.tz {
    .translateZ(10px);
}

.s3d {
    .scale3d(1, 2, 3);
}

.sz {
    .scaleZ(3);
}

.r3d {
    .rotate3d(1, 2, 3, 10deg);
}

.r-x {
    .rotateX(30deg);
}

.r-y {
    .rotateY(90deg);
}

.r-z {
    .rotateZ(-30deg);
}

.tp {
    .transform-perspective(10px);
}
